<template>
  <div>
    <div class="recommend-title">
      <span class="iconfont">&#xe8c3;</span> 热销推荐
    </div>
    <ul>
      <router-link
      class="item border-bottom"
      v-for="(item, index) of recommendList"
      :key="index"
      tag="li"
      :to="'/detail/' + item.id"
      >
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.url">
          <div class="item-tag" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png)">可定明日</div>
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default{
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus" scoped>
  .recommend-title
    margin-top: .2rem
    line-height: .8rem
    background-color: #eee
    text-indent: .2rem
    span
      color: #ff6350
      font-size: .4rem
  ul
    .item
      background-color: yellow
      width: 100%
      .item-img-wrapper
        position: relative
        float: left
        overflow: hidden
        width: 26.7%
        height: 0
        background-color: #eeeeee;
        padding-bottom: 26.7%
        .item-img
          width: 100%
          box-sizing: border-box
          padding: .1rem
        .item-tag
          position: absolute
          top: .1rem
          left: .1rem
          width: 1.02rem
          height: .38rem
          background-size: 100%
          color: #fff
          font-size: .2rem;
          line-height: .38rem;
          text-indent: .04rem;
      .item-info
        float: right
        width: 73.3%
        padding-bottom: 26.7%
        overflow: hidden
        height: 0
        .item-title
          font-size: .32rem
          height: .45rem
          line-height: .45rem
          padding: .2rem
        .item-desc
          font-size: .24rem
          height: .36rem
          line-height: .36rem
          padding: 0 .2rem
          color: #cccccc
        .item-button
          background-color: #ff9300;
          font-size: .16rem
          padding: 0 .2rem
          border-radius: .06rem
          margin: .1rem .2rem
          color: #ffffff

</style>
